<template>
  <el-drawer
    v-model="newModelValue"
    v-bind="$attrs"
    :close-on-click-modal="closeOnClickModal"
  >
    <slot></slot>
    <template v-if="showBtn" #footer>
      <el-button v-if="cancelText" @click="close">{{ cancelText }}</el-button>
      <el-button
        v-if="confirmText"
        :loading="loading"
        type="primary"
        @click="confirm"
      >
        {{ confirmText }}
      </el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, computed, useAttrs } from "vue";
const emits = defineEmits(["update:modelValue"]);
const $attrs = useAttrs();
const props = defineProps({
  // 控制弹框显示隐藏
  modelValue: {
    type: Boolean,
    default: false,
  },
  // 是否有加载提示
  loading: {
    type: Boolean,
    default: false,
  },
  // 是否显示底部按钮
  showBtn: {
    type: Boolean,
    default: true,
  },
  // 取消按钮文字
  cancelText: {
    type: String,
    default: "取消",
  },
  // 确定按钮文字
  confirmText: {
    type: String,
    default: "保存",
  },
  // 点击遮罩层是否关闭弹框
  closeOnClickModal: {
    type: Boolean,
    default: false,
  },
  footStyle: {
    type: String,
    default: "",
  },
});
const newModelValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
// 关闭弹框
const close = () => {
  $attrs.onClose && $attrs.onClose();
  newModelValue.value = false;
};
// 确认操作
const confirm = () => {
  $attrs.onConfirm && $attrs.onConfirm();
};
</script>
